<template>
    <view>
        <view class="photo">
            <view class="photo_item">
                <u-upload @afterRead="afterReadZm" @delete="deletePicZm" name="6" :maxCount="1" width="250" height="130"
                    :fileList="zmCardList">
                    <image :src="importStaticFile('/images/camera_idcard_zm.png')" mode="scaleToFill" style="width: 63vw; height: 24vh;">
                    </image>
                </u-upload>
            </view>
            <text class="text">扫描身份证人像面</text>
        </view>
        <view class="photo">
            <view class="photo_item">
                <u-upload @afterRead="afterReadFm" @delete="deletePicFm" name="6" :maxCount="1" width="250" height="130"
                    :fileList="fmCardList">
                    <image :src="importStaticFile('/images/camera_idcard_fm.png')" mode="scaleToFill" style="width: 63vw; height: 24vh;">
                    </image>
                </u-upload>
            </view>
            <text class="text">扫描身份证国徽面</text>
        </view>
        <view class="card_info" v-show="showInfo">
            <u-cell-group>
                <u-cell v-show="cardInfo.name" title="姓名">
                    <template #value>
                        <view class="info_value">{{ cardInfo.name }}</view>
                    </template>
                </u-cell>
                <u-cell v-show="cardInfo.sex" title="性别">
                    <template #value>
                        <view class="info_value">{{ cardInfo.sex }}</view>
                    </template>
                </u-cell>
                <u-cell v-show="cardInfo.nation" title="民族">
                    <template #value>
                        <view class="info_value">{{ cardInfo.nation }}</view>
                    </template>
                </u-cell>
                <u-cell v-show="cardInfo.birth" title="出生日期">
                    <template #value>
                        <view class="info_value">{{ cardInfo.birth }}</view>
                    </template>
                </u-cell>
                <u-cell v-show="cardInfo.authority" title="签发机关">
                    <template #value>
                        <view class="info_value">{{ cardInfo.authority }}</view>
                    </template>
                </u-cell>
                <u-cell v-show="cardInfo.validDate" title="有效期限">
                    <template #value>
                        <view class="info_value">{{ cardInfo.validDate }}</view>
                    </template>
                </u-cell>
                <u-cell v-show="cardInfo.idNum" title="身份证号">
                    <template #value>
                        <view class="info_value">{{ cardInfo.idNum }}</view>
                    </template>
                </u-cell>
                <u-cell v-show="cardInfo.address" title="住址">
                    <template #value>
                        <view class="info_value">{{ cardInfo.address }}</view>
                    </template>
                </u-cell>
                <u-cell v-show="cardInfo.address" title="手机号码">
                    <template #value>
                        <view class="info_value">{{ phone }}</view>
                    </template>
                </u-cell>
            </u-cell-group>
        </view>
        <view class="notice">请认真核对身份信息，确保信息无误。</view>
    </view>
</template>

<script setup>
import { importStaticFile } from '@/utils/common'
import { uploadZm, uploadFm, getFileBase64, idCardOCR } from '@/api/upload'
const props = defineProps({
    orderNo: String
})
const orderNo = props.orderNo
const showInfo = ref(false)
const phone = uni.getStorageSync('phone')
const zmCardList = reactive([])
const fmCardList = reactive([])
const cardInfo = reactive({})
const rxImgId = ref('')
const ghImgId = ref('')
const afterReadZm = async ({ file }) => {
    zmCardList.push({
        ...file,
        status: 'uploading',
        message: '上传中'
    })
    uploadZm(file.url, { orderNo }).then(({ data }) => {
        rxImgId.value = data.fileId
        queryIdCardInfo(data.fileId, 'zm')
    })
}
const afterReadFm = async ({ file }) => {
    fmCardList.push({
        ...file,
        status: 'uploading',
        message: '上传中'
    })
    uploadFm(file.url, { orderNo }).then(({ data }) => {
        ghImgId.value = data.fileId
        queryIdCardInfo(data.fileId, 'fm')
    })
}
const deletePicZm = (event) => {
    zmCardList.splice(event.index, 1)
}
const deletePicFm = (event) => {
    fmCardList.splice(event.index, 1)
}
const queryIdCardInfo = (fileId, type) => {
    uni.showLoading({
        title: '请稍后..',
        mask: true,
    })
    const params = {
        orderNo,
        imageId: fileId,
        test: 0
    }
    Promise.all([getFileBase64({ fileId }), idCardOCR(params)]).then(results => {
        if (type == 'zm') {
            zmCardList.splice(0, 1)
            zmCardList.push({ url: 'data:image/jpeg;base64,' + results[0].data.imageBase64.replace(/[\r\n]/g, "") })
        }
        if (type == 'fm') {
            fmCardList.splice(0, 1)
            fmCardList.push({ url: 'data:image/jpeg;base64,' + results[0].data.imageBase64.replace(/[\r\n]/g, "") })
        }
        Object.keys(results[1].data).forEach(key => {
            if (results[1].data[key]) cardInfo[key] = results[1].data[key]
        })
        showInfo.value = true
        uni.hideLoading()
    })
}
defineExpose({zmCardList, fmCardList, showInfo, cardInfo, phone, rxImgId, ghImgId})
</script>

<style lang='scss' scoped>
.photo {
    background-color: #fff;
    width: 80vw;
    margin: auto;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 10px;

    .photo_item {
        width: 63vw;
        margin: auto;
    }

    .text {
        display: flex;
        justify-content: center;
        color: gray;
        font-size: 28rpx;
        margin-top: 10px;
    }
}

.card_info {
    background-color: #fff;
    margin: auto;
    border-radius: 10px;
    margin-bottom: 10px;

    .info_value {
        width: 60vw;
        text-align: left;
        font-size: 14px;
    }
}

.notice {
    font-size: 28rpx;
    color: #999;
    margin: 5px 0;
}
</style>